<template>
   <div class="ratings" ref="ratings">
     <div class="ratings-wrapper">
       <div class="ratings-header">
         <div class="header-left">
           <div class="num">{{seller.score}}</div>
           <div class="text">综合评分</div>
           <div class="high">高于周边商家{{seller.rankRate}}%</div>
         </div>
         <div class="header-right">
           <div class="serviceScore">
             <span class="text">服务态度</span>
             <star class="star" :size="36" :score="seller.serviceScore"></star>
             <span class="num">{{seller.serviceScore}}</span>
           </div>
           <div class="foodScore">
             <span class="text">服务态度</span>
             <star :size="36" :score="seller.foodScore"></star>
             <span class="num">{{seller.foodScore}}</span>
           </div>
           <div class="arriveTime">
             <span class="text">送达时间</span>
             <span class="time">{{seller.deliveryTime}}分钟</span>
           </div>
         </div>
       </div>
       <split></split>
     </div>
   </div>
</template>

<script>
import axios from 'axios'
import Bscroll from 'better-scroll'
import Star from '../star/Star'
import Split from '../split/Split'
import RatingSelect from '../ratingselect/RatingSelect'
export default {
  name: 'Ratings',
  props: {
    food: Object
  },
  data () {
    return {
      seller: {}
    }
  },
  components: {
    Star,
    Split,
    RatingSelect
  },
  created () {
    axios.get('/static/mock/data.json').then((res) => {
      this.seller = res.data.seller
    })
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.ratings, {
      click: true
    })
  }

}
</script>

<style lang="stylus" scoped>
  .ratings
    position absolute
    top 174px
    bottom 0
    left 0
    width 100%
    overflow hidden
    .ratings-header
      display flex
      .header-left
        flex 0 0 137px
        width 137px
        margin 12px 0
        padding 6px 0
        border-right 1px solid rgba(7,17,27,0.1)
        text-align center
        @media only screen and (max-width 320px)
          flex 0 0 115px
          width 120px
        .num
          font-size 24px
          color rgb(255,153,0)
          line-height 28px
          margin-bottom 6px
        .text
          font-size 12px
          color rgb(7,17,27)
          line-height 12px
          margin-bottom 8px
        .high
          font-size 10px
          color rgb(7,17,27)
          line-height 10px
          margin-bottom 6px
      .header-right
        flex 1
        padding 18px 20px
        @media only screen and (max-width 320px)
          padding 18px 0 18px 5px
        .serviceScore,.foodScore,.arriveTime
          display flex
          margin-bottom 8px
          font-size 0
          .text
            display inline-block
            vertical-align top
            font-size 12px
            color rgb(7,17,27)
            line-height 18px
          .star
            display inline-block
            vertical-align top
            margin 0 12px
          .num
            display inline-block
            vertical-align top
            font-size 12px
            line-height 18px
            color rgb(255,153,0)
        .arriveTime
          margin-bottom 0px
          .time
            font-size 12px
            color rgb(147,153,159)
            line-height 18px
            margin-left 12px

</style>
